<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<!--引入 Vue  和  vant -->
		<meta name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<script src="js/vue.min.js?v=21"></script>
		<script src="js/jquery.min.js?v=21"></script>
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<!-- vantUi框架 -->
		<!-- 样式 -->
		<link rel="stylesheet" type="text/css" href="vant-ui@2.11/index.css" />
		<!-- 逻辑方法 -->
		<script src="vant-ui@2.11/vant.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<!-- 样式 -->
	<style>
		.top-view {
			width: 100%;
			height: 60px;
			background: #00BCD4;
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.search-view {
			border: none;
			padding: 10px 5px;
			width: 75%;
			margin-left: 10px;
			border-radius: 6px;
		}

		.text-city {
			color: #fff;
			font-size: 18px;
			margin-left: 5px;
		}

		.top-right {
			color: #fff;
			flex: 1;
			display: flex;
			flex-direction: row-reverse;
			align-items: center;
			margin-right: 10px;
		}
		
		 .my-swipe .van-swipe-item {
		    color: #fff;
		    font-size: 20px;
		    text-align: center;
		  }
		  
		  .img-swipe{
			width: 100%;
			height: 150px;
		  }
		  
		  .type-view{
			  margin-top: 10px;
			  width: 100%;
			  display: flex;
			  flex-direction: row;
			  flex-wrap: wrap;
		  }
		  
		  .type-item{
			  width: 25%;
			  display: flex;
			  flex-direction: column;
			  justify-content: center;
			  align-items: center;
			  margin-bottom: 10px;
		  }
		  
		  .item-view{
			  display: flex;
			  flex-direction: column;
			  width: 95%;
			  justify-content: center;
			  align-items: center;
		  }
		  
		  .img-type{
			  width: 50px;
			  height: 50px;
		  }
		  
		  .text-type{
			  font-size: 14px;
		  }
		  
		  .hot-view{
			  width: 100%;
			  display: flex;
			  flex-direction: column;
		  }
		  
		  .title-hot{
			  background-color: #eee;
			  padding: 5px 0;
			  padding-left: 10px;
			  font-size: 14px;
		  }
		  
		  .hot-item{
			  display: flex;
			  flex-direction: row;
			  border-bottom: #eee solid 1px;
		  }
		  
		  .img-hot{
			  width: 140px;
			  height: 90px;
		  }
		  
		  .hot-right{
			  flex: 1;
			  margin-left: 10px;
			  margin-right: 10px;
		  }
		  
		  .hot-name{
			  font-size: 16px;
			  margin-top: 5px;
		  }
		  .hot-content{
			  font-size: 14px;
			  color: #A8A8A8;
		  }
		  
		  .btn-check{
			  font-size: 12px;
			  margin-top: 10px;
			  padding: 5px 10px;
			  background-color: #FF9300;
			  color: #fff;
			  border-radius: 5px;
		  }
		  
		  .weekend-view{
			  display: flex;
			  flex-direction: column;
			  margin-bottom: 60px;
		  }
		  
		  .weekend-item{
			  display: flex;
			  flex-direction: column;
			  border-bottom: #A8A8A8 solid 1px;
		  }
		  
		  .img-week{
			  width: 100%;
			  height: 100px;
		  }
		  
		  .week-name{
			  margin-left: 10px;
			  font-size: 14px;
			  margin-top: 10px;
			  margin-bottom: 5px;
		  }
		  .week-content{
			  margin-bottom: 10px;
			  color: #A8A8A8;
			  margin-left: 10px;
			  font-size: 12px;
		  }
	</style>
	<body>
		<div id="root">
			<!-- 搜索框 -->
			<div class="top-view">
				<input class="search-view" placeholder="输入城市/地点/游玩主题" />
				<div class="top-right">
					<div>
						<van-icon name="arrow-down" />
					</div>
					<div>
						<span class="text-city">沈阳</span>
					</div>
				</div>
			</div>
			<!-- 轮播图 -->
			<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
			  <van-swipe-item v-for="(item,index) in imgList">
				  <img @click="clickImg(index)" class="img-swipe" :src="item.img"/>
			  </van-swipe-item>
			</van-swipe>
			
			<!-- 分类 -->
			<div class="type-view">
				<!-- 子布局 -->
				<div class="type-item" v-for="(item,index) in typeList">
					<div class="item-view" @click="clickType(index)">
						<img class="img-type" :src="item.img" />
						<span class="text-type">{{item.name}}</span>
					</div>
				</div>
			</div>
			
			<!-- 热销推荐 -->	
			<div class="title-hot">热销推荐</div>
			<div class="hot-view">
				<!-- 子布局 -->
				<div class="hot-item" v-for="item in 3">
					<img src="img/gugong.jpg" class="img-hot"/>
					<div class="hot-right">
						<div class="hot-name">故宫</div>
						<div class="hot-content">东方宫殿建筑代表，世界宫殿建筑典范</div>
						<span class="btn-check">查看详情</span>
					</div>
				</div>
			</div>
			
			<!-- 周末去哪儿 -->
			<div class="title-hot">周末去哪儿</div>
			<!-- 列表 -->
			<div class="weekend-view">
				<!-- 子项 -->
				<div class="weekend-item" v-for="item in 3">
					<!-- 图片 -->
					<img class="img-week" src="img/beijingbiyou.jpg" >
					<!-- 名字 -->
					<div class="week-name">北京温泉排行榜</div>
					<!-- 描述 -->
					<div class="week-content">细数北京温泉，温暖你的冬天</div>
				</div>
			</div>
			
			<van-tabbar v-model="active" @change="onChange">
			  <van-tabbar-item>
			    <span>首页</span>
			    <template #icon="props">
			      <img src="img/home_y.png" />
			    </template>
			  </van-tabbar-item>
			  <van-tabbar-item icon="search">行程</van-tabbar-item>
			  <van-tabbar-item icon="setting-o">热点</van-tabbar-item>
			  <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
			</van-tabbar>
		</div>
		<script>
			new Vue({
				el: "#root",
				data() {
					return {
						active:0,//底部导航栏下标
						// 分类列表
						typeList:[
							{img:'img/menpiao.png',name:'景点门票'},
							{img:'img/huaxueji.png',name:'滑雪季'},
							{img:'img/paowenquan.png',name:'泡温泉'},
							{img:'img/dongwuyuan.png',name:'动植园'},
							{img:'img/youleyuan.png',name:'游乐园'},
							{img:'img/biyoubangdan.png',name:'必游榜单'},
							{img:'img/yanchu.png',name:'演出'},
							{img:'img/chengshifengguang.png',name:'城市观光'},
						],
						// 轮播图列表
						imgList:[
							{img:'img/0001.jpg'},
							{img:'img/0002.jpg'},
							{img:'img/0003.jpg'},
							{img:'img/0004.jpg'},
						],
					}
				},
				// 方法
				methods: {
					// 底部导航栏切换
					onChange(index) {
						console.log('当前点击了第' + index + '个')
						//跳转要销毁当前页面
						// window.location.replace('tripPage.html')
						if(index == 0){
						}else if(index == 1){
							// 跳转到行程页
							window.location.replace('tripPage.html')
						}else if(index == 2){
							// 跳转到热点页
							window.location.replace('hotPage.html')
						}else if(index == 3){
							// 跳转到我的
							window.location.replace('minePage.html')
						}
					},
					// 点击轮播图
					clickImg(index){
						console.log('点击的是第' + (parseInt(index) + 1) + '个图片');
					},
					// 点击分类
					clickType(index){
						var that = this
						let name = that.typeList[index].name
						console.log("您当前点击的是" + name);
					}
					
				},
				mounted() {

				}
			})
		</script>
	</body>
</html>
